import React, {useState, useEffect} from 'react'
import { useNavigate } from 'react-router-dom';
import avatar from '@images/default-avatar.png'
import { Dropdown, Space } from 'antd'
import { CalculatorIcon } from '@components/icon/system';
import './index.less'

const Header = (props) => {
  const navigate = useNavigate();

  useEffect(() => {
  }, [])

  const logout = (e) => {
    e.preventDefault()
    localStorage.removeItem('zg-jwt')
    navigate('/login')
  }

  const openCalculator = () => {
    const isDev = location.protocol === 'http:';

    const interestURL = isDev
      ? location.origin + '#/interest'
      : location.href.replace(/index\.html.*$/, 'index.html#/interest'); // hash 路由示例

    window.electronAPI.openCalculator(interestURL);
  }

  const items = [
    {
      key: '1',
      disabled: true,
      label: (
        <a target="_blank" href="#">个人设置</a>
      ),
    },
    {
      key: '2',
      label: (
        <a href="#" onClick={(e) => logout(e)}>退出登录</a>
      ),
    }
  ];

  return (
    <>
      <div className="top">
        <div className="drag-window"></div>
      </div>
      <div className="header">
        <div className="logo"></div>
        <div className="header-sidebar">
          <button className="calculator-btn" onClick={() => openCalculator()}><CalculatorIcon /></button>
            <Dropdown menu={{ items }} placement="bottomRight">
              <div className="user">
                <div className="user-avatar"><img src={avatar} /></div>
                <i className="user-menu-icon"></i>
              </div>
            </Dropdown>
        </div>
      </div>
    </>
  )
}

export default Header;